<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第二次作业三</title>
</head>
<body>

<div id="app">
    <input @keyup="checkThis($event)">
    <h5 v-show="message">大写锁定建开了</h5>
</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                message: false,
                message3: 0,
                message2: '未输入成绩',
                lists: [{message: 'Foo'}, {message: 'Bar'}]
            }
        },
        watch: {
            message2:{
                handler: function (newValue,oldValue){
                    console.log(this.message);
                    this.$nextTick(function () {
                        this.checkThis();
                    })
                },
                deep:true
            }
        },
        methods: {
            checkThis(event) {
                if (event.keyCode === 20){
                    console.log("按了")
                    this.message = !this.message
                }
            }
        }

    }).mount('#app')
</script>


</body>
</html>